<template>
  <div class="dashboard-editor-container">
    <el-row style="background:#fff;padding:20px 20px 0;margin-bottom:32px;">
      <div style="text-align: left; font-size: 12px; padding: 5px;margin-bottom: 10px;">
        每日访问（含下载）统计
      </div>
      <line-chart :chart-data="lineChartData"/>
    </el-row>
    <el-row style="background:#fff;padding:20px 20px 0;margin-bottom:32px;">
      <div style="text-align: left; font-size: 12px; padding: 5px;margin-bottom: 10px;">
        手机壁纸下载比例统计
      </div>
      <div class="chart-wrapper">
        <pie-chart :chart-data="wrapperPieChartData"/>
      </div>
    </el-row>
    <el-row style="background:#fff;padding:20px 20px 0;margin-bottom:32px;">
      <div style="text-align: left; font-size: 12px; padding: 5px;margin-bottom: 10px;">
        手机型号访问（含下载）比例统计
      </div>
      <div class="chart-wrapper">
        <bar-chart :chart-data="pieChartData"/>
      </div>
    </el-row>
  </div>
</template>

<script>
import LineChart from "./dashboard/LineChart.vue";
import PieChart from "./dashboard/PieChart.vue";
import BarChart from "./dashboard/BarChart.vue";
import {getWallpaperPieChartData} from "@/api/system/red_packet/wp";
import {
  getPacketLineData,
  queryPiePacketLogData
} from "@/api/system/red_packet/take";

export default {
  name: "Index",
  components: {PieChart, LineChart, BarChart},
  data() {
    return {
      lineChartData: {
        titleData: [],
        clickNumberData: [],
        downloadNumberData: []
      },
      wrapperPieChartData: {
        expectedData: []
      },
      pieChartData: {
        titleData: [],
        barChartData: []
      }
    }
  },
  created() {
    getWallpaperPieChartData().then((res) => {
      this.wrapperPieChartData.expectedData = res.data
    })
    queryPiePacketLogData().then((res) => {
      console.log(res)
      this.pieChartData.titleData = res.data[0].titleData
      this.pieChartData.barChartData = res.data[0].barChartData
    })
    getPacketLineData().then((res) => {
      this.lineChartData.titleData = res.data[0].titleData
      this.lineChartData.clickNumberData = res.data[0].clickNumberData
      this.lineChartData.downloadNumberData = res.data[0].downloadNumberData
    })
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

